<template>
  <div class="rankItem">
    <div class="rank-harder">
      <div class="conter">
        <img :src="ranks.coverImgUrl" alt="" />
      </div>
      <div class="button" @click.stop="$router.go(-1)">
            <span class="iconfont icon-arrow-left-bold"></span>
            {{ranks.tags[0]||"排行榜"}}
        </div>
      <div class="time">更新时间: {{ time }}</div>
    </div>
    <div class="rank-title">
       <div class="left"><div><van-icon name="play-circle" color="rgb(255,60,47)" size="30px"  @click="addOne"/></div><div class="playAll">播放全部(共{{ ranks.tracks.length }}首)</div></div>
      <div> <span class="iconfont icon-shoucangdaogedan" @click="subscribe" :style="getT"></span></div>
    </div>
    <div class="rank-list">
      <div class="">
        <van-cell
          center
          v-for="(item, index) in ranks.tracks"
          :key="item.id"
          @click="setId(item.id)"
        >
          <!-- 使用 title 插槽来自定义标题 -->
          <template #right-icon>
           <van-icon name="play-circle-o" size="30" color="rgb(170,170,170)" v-if="item.mv" @click.stop="goMv(item.mv)"/>
          </template>
          <template #icon>
            <span class="list-id">{{ index + 1 }}</span>
          </template>
          <template #title>
            <span class="custom-title" style="    display: inline-block;
    width: 250px;
    overflow: hidden;text-overflow: ellipsis;">{{ item.name }}</span>
          </template>
          <template #label>
            <span class="icon"></span>
            <span class="custom-title">{{item.ar[0].name}}</span>
          </template>
        </van-cell>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { getPlaylistDetail } from "../api/rank";
import {getSubscribe,getSubCount} from "../api/user"
export default {
  data: function () {
    return {
      time: null,
      ranks: {
        tags:'',
        tracks: [],
        coverImgUrl: "",
       
      },
       t:1,
       userItem:[],
    };
  },
  methods: {
    setId(id) {
      this.$emit("get-player-id", id);
       this.$emit("get-play-all-id",this.$route.query.id);//传递歌单id
    },
    subscribe(){
       this.t++;
      if(this.t=='3'){
        this.t=1
      }
      getSubscribe({
        t:this.t,
        id:this.$route.query.id
      }).then(data=>{
        console.log(data)
      })
     
      if(this.t=='1'){
        Toast('取消收藏')
      }else{
        Toast('收藏成功!')
      }
    },
    addOne(){
       this.$emit("get-player-id", this.ranks.tracks[0].id);
       this.$emit("get-play-all-id",this.$route.query.id);//传递歌单id
    },
    goMv(mvid){
      this.$router.push({path:'/mv',query: { id:mvid} })
    }
  },
  created() {
    this.time = new Date().toLocaleDateString();
    let queryId = this.$route.query;
    if (!("id" in queryId)) {
      this.$router.push("/rank");
    }
    getPlaylistDetail({ id: queryId.id }).then((data) => {
      console.log(data);
      this.ranks = data.playlist;
    });
    //判断用户是否收藏了歌单
    let uid=window.localStorage.getItem('uid')
    getSubCount({
        uid,
      }).then((data) => {
        console.log(data);
        this.userItem = data.playlist;
      });
  },
  watch:{
    userItem(){
     if(this.userItem){
        this.userItem.forEach(item=>{
        if(item.id==this.$route.query.id){
          this.t=0;
          return
        }
    })
     }
    }
  },
  computed:{
     getT(){
      // [t==1 ?'credit-pay':'passed']
      if(this.t==1){
        return 'vertical-align: middle;font-size:30px;'
      }else{
        return 'vertical-align: middle;color:red;font-size: 30px;'
      }
    },
  }
};
</script>
<style lang="less">
.rankItem{
  background-image: linear-gradient(#ebedf0, #fff);
}
.rank-harder {
  width: 100%;
  position: relative;
  height: 300px;
  .button{
    position: absolute;
   
    color: #fff;
    top: 0px;
    z-index: 1;
    font-size: 16px;
    padding: 10px;
  }
  .conter {
    position: absolute;
    z-index: 1;
    height: 100%;
    width: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .time {
    color: #fff;
    position: absolute;
    text-align: center;
    z-index: 1;
    left: 0px;
    margin: auto;
    right: 0px;
    bottom: 20px;
  }
}
.rank-title {
  padding: 10px 16px;
  background-color: #ebedf0;
  display: flex;
  justify-content: space-between;
  .left{
    display: flex;
    align-items: center;
    .playAll{
      font-size: 20px;
      font-weight: 600;
      margin-left: 10px;
      vertical-align: top;
  }
  }
}
.rank-list {
  background-image: linear-gradient(#ebedf0, #fff);
  .van-cell__title {
    flex: 2;
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    white-space: nowrap;
    font-size: 17px;
  }
  .titles {
    color: #969777;
  }
  .list-id {
    font-size: 17px;
    margin-right: 10px;
  }
  .icon {
    display: inline-block;
    width: 32px;
    height: 16px;
    background-image: url("https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=");
    background-size: auto;
    background-repeat: no-repeat;
    vertical-align: text-bottom;
    
  }
  .van-cell{
    background-color: transparent;
  }
}
</style>
